<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="description" content="Global Tracking System, Fleet Management, ECO Driving, Fuel Monitoring, Real-time Video and Playback, Sharing Transportation, Asset Management." />
    <meta name="keywords" content="Global Tracking System, Fleet Management, ECO Driving, Fuel Monitoring, Real-time Video and Playback, Sharing Transportation, Asset Management." />
    <title>loading...</title>
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="dist/styles/iview.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/login.css">
    <link rel="stylesheet" href="css/icon/iconfont.css">
    <script src="js/config.js"></script>
</head>

<body>
    <div id="login-wraper" v-cloak v-bind:style="bgImgStyle">
        <div class="header">
            <div class="center">
                <div class="logo-wrap">
                    <span class="logo">
                    <Icon type="planet"></Icon>
                    </span>
                    <span class="logo-title">{{$t("login.title")}}</span>
                    <b>|</b>
                    <span class="version">v2.1</span>
                </div>
                <div class="language">
                    <div :class="{active:language == 'zh'}" @click="changeLang('zh')">
                        <i class="icon iconfont icon-fuhao-zhongwen" style="width:16px;height:16px;vertical-align: middle"></i> {{$t("login.chinese")}}
                    </div>
                    <b>/</b>
                    <div :class="{active:language == 'en'}" @click="changeLang('en')">
                        <i class="icon iconfont icon-fuhao-yingwen" style="width:16px;height:16px;vertical-align: middle"></i> {{$t("login.english")}}
                    </div>
                </div>
            </div>
        </div>
        <div class="main" class="noselect">
            <div class="center">
                <div class="left-wraper">

                </div>
                <div class="right-wraper">
                    <div class="login-form-box">
                        <div class="login-form-left-top"></div>
                        <div class="login-form-right-top"></div>
                        <div class="login-form-left-bottom"></div>
                        <div class="login-form-right-bottom"></div>
                        <Card>
                            <p slot="title">
                                <i-row>
                                    <i-col span="12" style="text-align:center;border-right: 1px solid #9190F3">
                                        <span @click="selectdAccount(0)" class="cursor" :class="{active:account == 0}">
                                            <Icon type="md-person"></Icon>{{$t("login.companyLogin")}}
                                        </span>
                                    </i-col>
                                    <i-col span="12" style="text-align:center;">
                                        <span @click="selectdAccount(1)" class="cursor" :class="{active:account == 1}">
                                            <Icon type="md-phone-portrait"></Icon>{{$t("login.deviceLogin")}}
                                        </span>
                                    </i-col>
                                </i-row>
                            </p>
                            <div class="inputs">
                                <p>
                                    <i-input type="text" v-model.trim="username" :placeholder="placeholder">
                                        <Icon type="ios-person" slot="prepend" v-show="account == 0"></Icon>
                                        <Icon type="md-tablet-portrait" slot="prepend" v-show="account == 1"></Icon>
                                    </i-input>
                                </p>
                                <p>
                                    <i-input type="password" v-model.trim="password" :placeholder="pwdPlaceholder">
                                        <Icon type="ios-lock" slot="prepend"></Icon>
                                    </i-input>
                                </p>
                                <p style="line-height:21px;">
                                    <Checkbox v-model="keepPass"><span style="color:#ffffff;">{{$t("login.pememberPwd")}}</span></Checkbox>
                                    <a style="font-size:12px;text-decoration:underline;color:#ffffff;float: right;" @click="experienced">{{$t("login.experience")}}</a>
                                </p>
                                <p>
                                    <i-button type="primary" @click="handleSubmit(false)" style="width: 100%" :loading="loading">{{$t("login.logining")}}</i-button>
                                </p>
                            </div>
                        </Card>
                    </div>
                </div>
            </div>
            <div class="qr-code-wrap">
                <div class="qr-code-inner-wrap">
                    <div>
                        <div class="img-wrap">
                            <img src="./images/gps51wx.jpg" alt="" srcset="" width="100px" height="100px" style="border: 1px solid #ffffff;">
                        </div>
                        <div class="desc">
                            <h3>{{$t("login.wechatApplet")}}</h3>
                            <ul>
                                <li>{{$t("login.step1")}}</li>
                                <li>{{$t("login.step2")}}</li>
                                <li>{{$t("login.step3")}}</li>
                            </ul>
                        </div>
                    </div>
                    <div>
                        <div class="img-wrap">
                            <img src="./images/gps51app.png" alt="" srcset="" width="100px" height="100px" style="border: 1px solid #ffffff;">
                        </div>
                        <div class="desc">
                            <h3>{{$t("login.appdownload")}}</h3>
                            <ul>
                                <li>{{$t("login.appstep1")}}</li>
                                <li>{{$t("login.appstep2")}}</li>
                                <li>{{$t("login.appstep3")}}</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer">
            <div class="beian">
                {{$t("login.beiAn1")}} <a href="https://beian.miit.gov.cn/">{{$t("login.beiAn2")}}</a>
            </div>
        </div>
    </div>
    <script src="js/dateformat.js"></script>
    <script src="dist/vue.min.js"></script>
    <script src="js/js.cookie.min.js"></script>
    <script src="dist/iview.min.js"></script>
    <script src="js/vue-i18n.min.js"></script>
    <script src="js/language.js"></script>
    <script src="custom/languageex.js"></script>
    <script src="js/gps51-jquery.js"></script>
    <script src="js/gps51-jquery.md5.js"></script>
    <script src="js/util.js"></script>
    <script src="js/login.js"></script>
</body>

</html>